infinite-list 是可回收 DOM 的无限下拉列表插件

前端

infinite-list 是可回收 DOM 的无限下拉列表插件, 支持 jQuery 和 Zepto 库。点击此预览

特性

  • 利用 DOM 回收, 解决多数据列表导致的卡顿
  • 支持下拉加载下一页数据
  • 可定位到列表置顶
  • 可自定义列表项的 HTMl 结构
  • 同时支持 jQuery 和 Zepto 库

兼容性

  • Android 4.0+
  • iOS 8+

示例

安装与使用

1
2
3
4
5
6
7
8
# 安装依赖
npm install

# 开发
gulp dev

# 打包发布
gulp build

参数

参数 默认值 说明
wrapper .infinite-list’ 列表容器
listData [] 列表数据
offset 10 触发加载下一页的相对底部距离
activeIndex 0 定位 Item index
rowHeight 58 Item 的高度
isInfinite false 是否是无限下拉列表
itemTemplate * 列表 Item 的 HTML
loadStatusTemplate * 状态 HTML

回调函数

函数 默认值 说明
onInfinite function(){} 加载下一页触发

方法

函数 说明
obj.pushData() 添加数据
pushData.close([1, 2, 3]);
obj.setLoadStatus(status) 设置列表加载状态
可传入参数：
‘loaded’: 弹窗内容, 可以是HTML
‘loading’: 弹窗提示图标
‘loadFail’: 弹窗提示文字
‘loadEnd’: 自动关闭的延迟时间
obj.locate(index) 列表定位到置顶 Item
可传入参数：
index: Item 序号

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.
├─ dist                    # 项目发布资源目录, gulp 生成
│
├─ gulp
│   ├─ build.task.js       # 打包任务
│   ├─ clean.task.js       # 删除任务
│   ├─ dev.task.js         # 开发任务
│   ├─ gulp.config.js      # gulp 配置
│   ├─ help.task.js        # 帮助任务
│   ├─ server.task.js      # 本地服务器任务
│   └─ watch.task.js       # 监听任务
│
├─ src
│   ├─ css                 # 项目 CSS 文件, 由 gulp 生成
│   ├─ demos               # 项目示例页面
│   ├─ images              # 项目 image 文件
│   ├─ js                  # 项目 JS 文件
│   │  └─ infinitelist.js  # 无限列表 JS
│   ├─ libs                # 公共 JS 文件
│   ├─ scss                # 项目相关 SCSS 文件
│   ├─ index.html          # 入口页
│   └─ templates           # 初始静态 DMEO 资源目录
│
├─ gulpfile.js             # gulp 任务配置
└─ package.json            # 项目信息以及依赖



项目下载： infinite-list